<template>
  <div class="container">
    <!-- 头部渐变背景   -->
    <header-bg v-if="addressList.length"></header-bg>
    <!-- 收货地址列表 -->
    <div v-if="addressList.length">
      <div
        class="flex address-pannle mar-b-10"
        v-for="(address, index) in addressList"
        :key="index">
        <van-swipe-cell :right-width="64"  @close="onClose(address, $event)" async-close>
          <div class="flex v-align-c pad-r-23">
            <div
              class="flex-col flex-item pad-t-22 pad-b-24"
              @click.stop.prevent="selcetAddress(address)">
              <div class="v-align-c">
                <span class="font-15 font-color-3 mar-r-10 font-w">{{address.receiverNameShort }}</span>
                <span class="font-15 font-color-3 mar-r-10 font-w">{{address.receiverPhone}}</span>
                <span
                  v-if="address.defaultFlag == 1"
                  class="default-tag font-11 width-30 height-15 text-align-c mar-r-10">默认</span>
                <span
                  v-if="address.addressLabel"
                  class="font-11 width-30 height-15 text-align-c"
                  :class="'label-'+ address['labelStyle']">{{address.addressLabel}}</span>
              </div>
              <span class="font-13 font-color-3 mar-t-5">{{address.provinceName}}{{address.cityName}}{{address.districtName}}{{address.communityName}}{{address.houseNum}}</span>
              <!-- <div class="font-13 font-color-9 mar-t-5">{{address.receiverName}} {{address.receiverPhone}}</div> -->
            </div>
            <div>
              <img class="width-17 height-17" v-if="fileSpace" :src="fileSpace + '/images/edit-icon.png'" alt="" @click.stop.prevent="saveAddress(address)">
            </div>
          </div>
          <div slot="right" class="pad-l-2">删除</div>
        </van-swipe-cell>
      </div>
    </div>
    <div class="height-60"></div>
    <!-- 底部按钮 -->
    <div class="btn-group flex pad-r-20 pad-t-15 pad-b-20 pad-l-16 flex-center align-c">
      <div class="width-300 height-40" @click="$pt.navigateTo({ url: '/pages/personal/address/saveAddress/main' })">
        手动添加
      </div>
      <!-- <div class="width-160 height-40" @click="addNewAddress">
        微信添加
      </div> -->
    </div>
    <!-- 没有设置地址信息 -->
    <div class="nodata" v-if="!addressList.length">
      <img v-if="fileSpace" :src="fileSpace + '/images/anchor-nodata.png'" class="width-205 height-173" alt="">
      <div class="align-c mar-t-20 font-16 font-color-9">
      暂时无地址信息~
      </div>
    </div>
    <!-- <div class="height-63"></div> -->
  </div>
</template>

<script>
  import headerBg from '@/components/headerBg'
  import { listAddress, deleteAddress } from '@/api/address'
  export default {
    components: { headerBg },
    data() {
      return {
        addressList: [],
        urlFrom: '',
        addressFlag: 0,
        bgColor: '#FF243D'
      }
    },
    onShow() {
      this.addressFlag = 0
      this.urlFrom = this.getCurrentPage().query.urlFrom
      this.listAddress()
    },
    mounted() {
      this.$pt.removeStorageSync('addressNone')
    },
    methods: {
      onClose(value, event) {
        // 滑动单元格关闭事件
        const { position, instance } = event.mp.detail
        switch (position) {
          // 点击中间部分触发的事件
          case 'cell':
            instance.close()
            break
          case 'right':
            // 点击滑块右边触发的事件 (删除)
            this.delAddress(value)
            instance.close()
            break
        }
      },
      delAddress(value) {
        const that = this
        this.$pt.showModal({
          content: '确定要删除地址吗？',
          success(res) {
            if (res.confirm) {
              deleteAddress({
                addressId: value.addressId,
                memberId: that.getCustomerId
              }).then((response) => {
                if (response.isError) return
                that.$utils.showToast({ title: '删除成功！' })
                that.listAddress()
              })
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      addNewAddress() {
        this.addFromWechat()
      },
      get(content) {
        if (!content) {
          return ''
        }
        return content
      },
      selcetAddress(address) {
        if (this.urlFrom === 'personal') {
          this.saveAddress(address)
        } else {
          this.$pt.setStorageSync('addressId', address.addressId)
          this.$pt.navigateBack({ delta: -1 })
        }
      },
      saveAddress(address) {
        this.$pt.setStorageSync('addressDetail', true)
        // const params = '?addressId=' + this.get(address.addressId) + '&defaultFlag=' + this.get(address.defaultFlag) + '&communityName=' + this.get(address.communityName) + '&receiverName=' + this.get(address.receiverName) + '&receiverPhone=' + this.get(address.receiverPhone) + '&address=' + this.get(address.address) + '&houseNum=' + this.get(address.houseNum) + '&provinceName=' + this.get(address.provinceName) + '&cityName=' + this.get(address.cityName) + '&districtName=' + this.get(address.districtName)
        console.log('address 222', address)
        let addressData = {
          addressId: address.addressId,
          defaultFlag: address.defaultFlag || '',
          communityName: address.communityName,
          receiverName: address.receiverName,
          receiverPhone: address.receiverPhone,
          address: address.address,
          houseNum: address.houseNum || '',
          provinceName: address.provinceName,
          cityName: address.cityName,
          districtName: address.districtName,
          addressLabel: address.addressLabel || ''
        }
        this.$pt.navigateTo({ url: '/pages/personal/address/saveAddress/main?addressObj=' + JSON.stringify(addressData) })
      },
      addFromWechat() {
        const that = this
        that.$pt.setStorageSync('chooseLocation', true)
        that.$pt.chooseAddress({
          success: (res) => {
            const address = {}
            address.receiverName = res.userName
            address.receiverPhone = res.telNumber
            address.address = res.detailInfo
            address.provinceName = res.provinceName
            address.cityName = res.cityName
            address.districtName = res.countyName
            address.communityName = res.name
            address.memberId = that.getMemberId
            address.defaultFlag = 0
            this.saveAddress(address)
          },
          fail: function(err) {
            if (err.errMsg.indexOf('cancel') !== -1) return
            that.$pt.showModal({
              content: '需要访问你的通讯地址',
              success(res) {
                if (res.confirm) {
                  that.$pt.openSetting()
                } else if (res.cancel) {
                  console.log(err)
                }
              }
            })
          }
        })
      },
      listAddress() {
        if (!this.getShowBuyCard) return
        listAddress({
          customerId: this.getCustomerId
        }).then((response) => {
          if (response.isError) return
          this.addressList = response.data
          this.addressList.forEach(item => {
            if (item.receiverName) {
              item.receiverNameShort = item.receiverName
            }
            if (item.receiverNameShort && item.receiverNameShort.length > 5) {
              item.receiverNameShort = this.$utils.getStrByLength(item.receiverNameShort, 10)
            }
            if (item.defaultFlag) {
              this.addressFlag++
            }
            if ('addressLabel' in item) {
              console.log('addressLabel')
              let label = ''
              switch (item.addressLabel) {
                case '公司':
                  label = 1
                  break
                case '家':
                  label = 2
                  break
                case '其他':
                  label = 3
                  break
                case '学校':
                  label = 4
                  break
              }
              this.$set(item, 'labelStyle', label)
            }
          })
          if (this.addressFlag < 1) {
            this.$pt.setStorageSync('addressNone', true)
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    padding: 12px 10px;
    box-sizing: border-box;
    .bg-color {
      height: 246px;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .address-pannle {
      background: #fff;
      align-items: center;
      padding: 0px 0px 0 12px;
      border-radius: 5px;
      /deep/ ._van-swipe-cell{
        width: 100%;
      }
      /deep/ .van-swipe-cell__right {
        background: #FF3A2F;
        height: 100%;
        top: 0;
        color: white;
        width: 100%;
        padding-left: 13px;
        display: flex;
        align-items: center;
      }
      .default-tag {
        color: #FF243D;
        border-radius: 7.5px;
        background: #F6E0E2;
      }
      .label-2{
        background: #FFF5E6;
        border-radius: 8px;
        color: #FF9C00;
      }
      .label-3 {
        background: #FFEAEC;
        border-radius: 8px;
        color: #FF243D;
      }
      .label-1 {
        background: #E6F0FF;
        border-radius: 8px;
        color: #0066FF;
      }
      .label-4 {
        background: #EBEDFF;
        border-radius: 8px;
        color: #7427FF;
      }
    }
    .btn-group {
      background: #f5f5f5;
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 0px;
      justify-content: space-between;
      box-sizing: border-box;
      &>div {
        line-height: 40px;
        text-align: center;
        box-sizing: border-box;
        border-radius: 24px;
      }
      &>div:nth-child(1) {
        background: #EBEDFF;
        border: 1px solid #7427FF;
        color: #7427FF;
      }
      &>div:nth-child(2) {
        background: #7427FF;
        color: #fff;
      }
    }
  }
  .nodata {
    margin-top: 85px;
    img{
      margin: 0 auto;
    }
  }
</style>
